import React, { useState, useEffect } from 'react';
import styles from './todo.less';
import { Card, Table, Popconfirm, Space, Button, message, Row, Col, Badge, Modal, Form, Input, Radio } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { deleteTodo, todoList, addTodo, editTodo } from '@/api/todo';
import moment from 'moment';

const todoPage = () => {
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '操作',
      key: 'action',
      render: (text: any, record: any) => (
        <Space size="middle">
          <Button onClick={() => handleProxy(record)}>编辑</Button>
          <Button type="primary" ghost onClick={() => handleStatus(record)}>
            {record.taskState ? '成功' : '待办'}
          </Button>
          <Popconfirm title="是否删除?" onConfirm={() => handleDelete(record)} okText="确定" cancelText="取消">
            <Button danger ghost>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
    {
      title: '任务名称',
      dataIndex: 'title',
      key: 'title',
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: '任务内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '任务状态',
      dataIndex: 'taskState',
      key: 'taskState',
      render: (text: number) => {
        return text ? <Badge color="blue" text="完成" /> : <Badge color="red" text="失败" />;
      },
    },
    {
      title: '截止日期',
      dataIndex: 'updateTime',
      key: 'updateTime',
      render: (text: number) => <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
  ];
  const [popShow, setPopShow] = useState<boolean>(false);
  const [isChange, setChange] = useState<boolean>(false);
  const [id, setId] = useState(undefined);

  const [list, setList] = useState([]);
  // 获得表单
  const [form] = Form.useForm();

  useEffect(() => {
    todoList().then((res: any) => {
      setList(res);
    });
  }, [isChange]);

  const handleOK = () => {
    form.validateFields().then(values => {
      let actionProxy = id ? editTodo : addTodo;
      values.id = id;
      actionProxy(values).then(() => {
        message.success('操作成功');
        setChange(!isChange);
        form.resetFields();
        setPopShow(false);
        setId(undefined);
      });
    });
  };
  const handleDelete = (record: any) => {
    deleteTodo({ id: record.id }).then(() => {
      message.success('操作成功');
      setChange(!isChange);
    });
  };
  const handleStatus = (record: any) => {
    editTodo({ status: 1, id: record.id }).then(() => {
      message.success('操作成功');
      setChange(!isChange);
    });
  };
  const handleProxy = (record: any) => {
    if (!record) {
      setId(undefined);
      setPopShow(true);
      return;
    }
    setId(record.id);
    form.setFieldsValue(record);
    setPopShow(true);
  };

  return (
    <div className={styles.page}>
      <Card style={{ width: '100%', minHeight: '100%' }}>
        <Row style={{ marginBottom: 14 }}>
          <Col span={8} style={{ fontSize: 22 }}>
            任务列表
          </Col>
          <Col span={16} style={{ textAlign: 'right' }}>
            <Button onClick={() => handleProxy(false)} type="primary" icon={<PlusOutlined />}>
              新增任务
            </Button>
          </Col>
        </Row>
        <Table scroll={{ x: 700 }} columns={columns} dataSource={list} />
      </Card>
      {/* 弹窗 */}
      <Modal
        width={600}
        centered
        title="新增"
        onOk={handleOK}
        visible={popShow}
        okText="提交"
        cancelText="取消"
        onCancel={() => setPopShow(false)}>
        <Form form={form} name="task_in_modal">
          <Form.Item name="title" label="任务名称" rules={[{ required: true, message: '请输入任务名称' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="content" label="任务描述" rules={[{ required: true, message: '请输入任务描述' }]}>
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default React.memo(todoPage);
